<p class="dashboard-scroller-title">{{ title }}</p>

@if (!books || books.length === 0) {
  <div class="dashboard-scroller-no-books">
    <p class="text-sm">
      {{ bookListType === 'lastRead' ? "You haven't read any books yet!" : "No books have been added to BookLore!" }}
    </p>
  </div>
}

@if (books) {
  <div class="dashboard-scroller-infinite"
    infiniteScroll
    [infiniteScrollDistance]="2"
    [infiniteScrollThrottle]="50"
    #scrollContainer
    [horizontal]="true">
    @for (book of books; track book) {
      <div class="dashboard-scroller-card">
        <app-book-card [book]="book" [isCheckboxEnabled]="false"></app-book-card>
      </div>
    }
  </div>
}

@if ( books === null) {
  <div>
    <p class="text-sm">Failed to load books! :(</p>
  </div>
}
